@use "@styles/mixins/function" as *;
@use "@styles/mixins/namespace" as *;
@use "@styles/common/var" as *;

.console {
  --card-spacing: 20px;

  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);

  &.full {
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: auto;
    background-color: cssVar(bg-color-page);
  }

  // 卡片头部
  :deep(.card-header) {
    display: flex;
    justify-content: space-between;

    .title {
      h4 {
        font-size: 18px;
        font-weight: 500;
        color: cssVar(gray-900) !important;
      }

      p {
        margin-top: 3px;
        font-size: 13px;
        color: cssVar(gray-600) !important;

        span {
          margin-left: 10px;
          color: #52c41a;
        }
      }
    }
  }

  .el-row {
    row-gap: 20px;
  }

  @media screen and (max-width: $device-phone) {
    --card-spacing: 15px;
  }
}
